<style>
.ddpro-details-style4 .ddprodr-box {
    width: 100%;
}
.ddpro-details-style4 .ddprodr-item {
    text-align: left;
}
.ddprodr-dt {
    height: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
    color: #242424;
    cursor: pointer;
}
.ddprodr-dl {
    border-bottom: 1px solid #ccc;
    padding-left: 10px;
}
.ddprodr-dd {
    display: none;
    text-align: center;
    color: #333;
    padding: 12px 15px;
    line-height: 1.5;
}
.ddprodr-dt.open~.ddprodr-dd {
    display: block;
}
@media(max-width:768px){
  .ddprodr-dd{
    text-align: left;
    padding: 5px 8px;
  }
}  
</style>
 
<div class="ddpro-details-main" style="background: {{ section.settings.bg }};">

    <div class="ddpro-details-item ddpro-details-style4">
        <div class="ddpro-details-header">{{ section.settings.bb_title }}</div>
        <div class="ddpro-details-box {% if section.settings.overturn %}ddpro-details-row-reverse{%endif%}">
            <div class="ddpro-details-left">
              <img class="ddpro-details-picture" src="{{ section.settings.image | img_url: 'master' }}">
            </div>
            <div class="ddpro-details-right">
              <div class="ddprodr-box">
                <div class="ddprod-title">{{ section.settings.ctitle }}</div>
                <div class="ddprodr-item">
                {% for block in section.blocks %}
                <div class="ddprodr-dl">
                    <div class="ddprodr-dt">{{ block.settings.ctitle }}</div>
                    <div class="ddprodr-dd">{{ block.settings.ctext }}</div>
                </div>
                {% endfor %}
                </div>
              </div>
            </div>
        </div>
    </div>
</div>

<script> 
$(".ddprodr-dt").on("click",function(){
  let isShow=false;
  if(!$(this).hasClass('open')){
    isShow=true;
  }
  $(".ddprodr-dt").removeClass('open');
  if(isShow){
    $(this).addClass('open');
  }  
});
if($(window).width()<768){
  $(".ddprodr-dt").eq(0).addClass("open")
}
</script>
{% schema %}
{
  "name": "产品页 - 产品详情(faq)",  
  "class":"ddpro-details-faq",
  "settings": [
    {
      "type": "color",
      "id": "bg",
      "label": "背景颜色",
      "default": "#fff"
    },
    {
      "type": "checkbox",
      "id": "overturn",
      "label": "开启翻转",
      "default": false
    },
    {
      "type": "text",
      "id": "bb_title",
      "label": "标题"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "模块主图"
    },
    {
      "type": "textarea",
      "id": "ctitle",
      "label": "描述标题",
      "default": "FAQ"
    }
  ],
  "blocks": [
    {
      "type": "style",
      "name": "faq",
      "settings": [
  	    {
          "type": "textarea",
          "id": "ctitle",
          "label": "描述标题"
        },
  	    {
          "type": "richtext",
          "id": "ctext",
          "label": "描述文案"
        }
      ]
    }
  ]
}
{% endschema %}

